{% extends "base.html" %}

{% block navbar %}{% endblock %}
{% block content %}
    <style type="text/css">
        /* 内部样式 */


       .wrap {
            
            margin: 0;
            font-size: 70%;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            padding: 15px 0;
            background: #fcfcfc;
        }

        #header {
            max-width: 500px;
            padding: 25px 15px 15px 15px;
            margin: 0 auto;
            background: #3f4b4a;
        }

        #title {
            
            padding: 0;
            margin: 0;
            font-size: 1.5em;
        }

        #title a:link,
        #title a:visited {
            color: #8bf8cb;
            text-decoration: none;
        }

        #date {
            float: right;
            padding: 10px 10px;
            height: 40px;
            color: #fafafa;
            text-align: right;
        }

        #content {
            max-width: 500px;
            padding: 0 15px;
            margin: 0 auto;
            background:  #f5f5f5;
            color: #080808;
        }

        #content h1 {
            color: #74A8F5;
            /* font-family: "Trebuchet MS", Arial, Helvetica; */
            padding: 30px 0 0 0;
            margin: 0px 0 15px 0;
            font-size: 2em;
        }

        .form_table {
            margin-bottom: 15px;
            font-size: 1.1em;
        }

        .form_table td {
            padding: 5px 10px;
            text-align: right;
            vertical-align: middle;
        }

        .form_table td img {
            height: 32px;
            border: none;
        }

        #footer {
            max-width: 500px;
           
            color: #FFFFFF;
            margin: -0.5cm auto;
        }

        #footer #footer_bg {
            background: #3f4b4a;
            padding: 15px 15px 15px 15px;
            margin:auto;
        }
        body {
            margin: 1cm auto;
            font-size: 16px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            padding: 15px 0;
            background-image: url("../static/image/s.jpg");
            background-position: center center;
  			background-repeat: no-repeat;
  			background-attachment: fixed;
  			background-size: cover;
        }
        
    </style>
   
    <div class="container">
     <div id="wrap">
        <div id="header">
            <span id="title">
                <a href="#">用户登录</a>
            </span>
            <span id="date">
                2019/08/30
            </span>
        </div>
        <div id="content">
            <h1>
                登录
            </h1>
             <form style="background-color:white;  padding:2vh" method="post">
                    {% csrf_token %}
                    <div class="form-group">                    
                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter username" name="username">
                    </div>
                    <table style="width:100%">
                        <tr>
                            <td>
                                <div>
                                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
                                </div>
                            </td>
                            <td>
                                <button style="float:right" type="submit" class="btn btn-info">Log in</button>
                            </td>
                        </tr>
                    </table>
                </form>
                <form style="background-color:white; margin-top:2vh; padding:2vh 2vh 8vh 2vh">
                    <p style="font-size:16px"><strong>New to WeChat?</strong> Sign up</p>
                    <div class="form-group">                    
                        <input type="text" class="form-control" id="register_username" placeholder="Full name">
                    </div>
                    <div class="form-group">                    
                        <input type="email" class="form-control" id="register_email" placeholder="Email">
                    </div>
                    <div class="form-group">                    
                        <input type="password" class="form-control" id="register_password" placeholder="Password">
                    </div>
                    <a style="float:right" id="register_submit" class="btn btn-warning">Sign up for WeChat</a>
                </form>
        </div>

        <div id="footer">
            <div id="footer_bg">
                Liugm@xaut.edu.cn
            </div>
        </div>
    </div>



    <script>
        function register_user() {
            $.ajax({
                type: "post",
                url: "/register",
                data: {
                    "username": $("#register_username").val(),
                    "password": $("#register_password").val(),
                    "email": $("#register_email").val(),
                    "csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val(),
                },
                success:function (response) {
                    alert(response['message'])
                    location.reload()
                }
            })
        }

        $("#register_submit").click(function (){
            register_user()
        })
    </script>
{% endblock %}